<html><head>
<title>PeekoComputer (Hex) v0.3.0</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/keyboard.js"></script>
<script type="text/javascript" src="js/instructions_hex.js"></script>
<script type="text/javascript" src="js/peeko_hex.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/orig-style.css" type="text/css">
</head><body>
<div id="peekocomputer">
<div class="maindisplay">
<table class="peekotable">
 <thead>
  <tr>
   <td colspan="2" class="statuscell"></td>
   <td colspan="6" class="statuscell" id="steps" style="text-align: left;"></td>
   <td colspan="6" class="statuscell" id="mnemonic"></td>
   <td colspan="6" class="statuscell" id="activity" style="text-align: right;"></td>
   <td colspan="2" class="statuscell"></td>
  </tr>
  <tr>
   <td colspan="4" class="statuscell">&nbsp;</td>
   <td colspan="2" class="statuscell" style="text-align:right;">ACC&nbsp;</td>
   <td colspan="2" class="statuscell" style="text-align:left;" id="accumulator"></td>
   <td colspan="4" class="statuscell" style="text-align:right;">CARRY&nbsp;</td>
   <td colspan="2" class="statuscell" style="text-align:left;"id="carry"></td>
   <td colspan="2" class="statuscell" style-"text-align:right;">ZERO&nbsp;</td>
   <td colspan="2" class="statuscell" id="zero" style="text-align:left;"></td>
   <td colspan="4" class="statuscell">&nbsp;</td>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td colspan="22" class="addresscell"></td>
  <tr>
  <tr>
   <td class="addresscell">H/L</td>
   <td class="addresscell"></td>
   <td class="addresscell">0</td>
   <td class="addresscell"></td>
   <td class="addresscell">1</td>
   <td class="addresscell"></td>
   <td class="addresscell">2</td>
   <td class="addresscell"></td>
   <td class="addresscell">3</td>
   <td class="addresscell"></td>
   <td class="addresscell">4</td>
   <td class="addresscell"></td>
   <td class="addresscell">5</td>
   <td class="addresscell"></td>
   <td class="addresscell">6</td>
   <td class="addresscell"></td>
   <td class="addresscell">7</td>
   <td class="addresscell"></td>
   <td class="addresscell">8</td>
   <td class="addresscell"></td>
   <td class="addresscell">9</td>
   <td class="addresscell"></td>
   <td class="addresscell">A</td>
   <td class="addresscell"></td>
   <td class="addresscell">B</td>
   <td class="addresscell"></td>
   <td class="addresscell">C</td>
   <td class="addresscell"></td>
   <td class="addresscell">D</td>
   <td class="addresscell"></td>
   <td class="addresscell">E</td>
   <td class="addresscell"></td>
   <td class="addresscell">F</td>
   <td class="addresscell"></td>
  </tr>
 </tbody>
</table>
</div>
<div id="instset" class="infopane">
</div>
<div class="outputpane">
<div id="outputdisplay">00000000</div>
<table>
 <tr><td>LED 0:</td><td id="led0">&nbsp;</td><td class="spacer"></td><td>LED 4:</td><td id="led4">&nbsp;</td></tr>
 <tr><td>LED 1:</td><td id="led1">&nbsp;</td><td class="spacer"></td><td>LED 5:</td><td id="led5">&nbsp;</td></tr>
 <tr><td>LED 2:</td><td id="led2">&nbsp;</td><td class="spacer"></td><td>LED 6:</td><td id="led6">&nbsp;</td></tr>
 <tr><td>LED 3:</td><td id="led3">&nbsp;</td><td class="spacer"></td><td>LED 7:</td><td id="led7">&nbsp;</td></tr>
</table>
<br />
</div>
<div id="help" class="helppane">
Use Cursor keys for navigation<br />
Press 0-F to place value into location<br />
SPACE - Single step program<br />
T - Escape from program run<br />
G - Go: execute program<br />
X - Fast execution<br />
I - Remap instruction<br />
O - Origin (return to 00)<br />
S - Save program<br />
L - Load program<br />
</div>
<div class="creditpane">
<br />&nbsp;<br />
<p style="display:none"><a href="#save_popup" id="savelink" class="fancybox">Save This</a></p>
Original program by Tim Dobson and Paul Beverly, (c) 1982 AcornSoft<br />
Reimagined in 2013 by Ian Spray
</div>
</div>

<script>
var exec_timer;
var delayTime;

function one_step() {
	execute_pc();
	update_status();
	show_pc();
	if (programState.READY == runMode) {
		halt_program(programState.READY);
		$('#activity').text("STOP");
	} else {
		setTimeout(one_step, delayTime);
	}
}

function key_down(theEvent, keys, combo) {
	switch(combo) {
	case '0':
	case '1':
	case '2':
	case '3':
	case '4':
	case '5':
	case '6':
	case '7':
	case '8':
	case '9':
	case 'A':
	case 'a':
	case 'B':
	case 'b':
	case 'C':
	case 'c':
	case 'D':
	case 'd':
	case 'E':
	case 'e':
	case 'F':
	case 'f':
		var loc = programCounter;
		if (programCounter < 10)
			loc = "0" + loc;
		$('#' + loc).text(combo);
		decode_pc();
		break;
	case 'num0':
	case 'num1':
	case 'num2':
	case 'num3':
	case 'num4':
	case 'num5':
	case 'num6':
	case 'num7':
	case 'num8':
	case 'num9':
		var loc = programCounter;
		var thekey = combo.substr(4,1);
		if (programCounter < 10)
			loc = "0" + loc;
		$('#' + loc).text(thekey);
		decode_pc();
		break;
	case 'T':
	case 't':
		halt_program(programState.READY);
		update_status();
		break;
	case 'X':
	case 'x':
		delayTime = 100;
		if (programState.READY == runMode) {
			lastStepCount = 0;
			runMode = programState.RUN;
			setTimeout(one_step, delayTime);
			$('#activity').text("RUN");
		}
		break;
	case 'G':
	case 'g':
		delayTime = 1000;
		if (programState.READY == runMode) {
			lastStepCount = 0;
			runMode = programState.RUN;
			setTimeout(one_step, delayTime);
			$('#activity').text("RUN");
		}
		break;
	case 'I':
	case 'i':
		halt_program(programState.READY);
		update_status();
		$.fancybox.open("#instruction_popup");
		break;
	case 'L':
	case 'l':
		halt_program(programState.READY);
		update_status();
		$.fancybox.open("#load_popup");
		break;
	case 'N':
	case 'n':
		halt_program(programState.READY);
		update_status();
		break;
	case 'O':
	case 'o':
		halt_program(programState.READY);
		set_pc(0);
		update_status();
		show_pc();
		break;
	case 'P':
	case 'p':
		$('#instset').toggle();
		break;
	case 'S':
	case 's':
		halt_program(programState.READY);
		update_status();
		$('#savelink').click();
		//$.fancybox.open("#save_popup");
		break;
	}
	switch(keys[0]) {
	case 'up':
		change_pc(-16);
		update_status();
		show_pc();
		break;
	case 'down':
		change_pc(16);
		update_status();
		show_pc();
		break;
	case 'left':
		change_pc(-1);
		update_status();
		show_pc();
		break;
	case 'right':
		change_pc(1);
		update_status();
		show_pc();
		break;
	case 'space':
		halt_program(programState.READY);
		execute_pc();
		update_status();
		show_pc();
		break;
	}
}

function fillin_popups() {
	$('#cur_set').html(get_instruction_set(true));
	$('#full_set').html(get_all_instructions(true));
}

function swap_instructions() {
	var source = parseInt("0x" + $('#cnum').text());
	var dest   = parseInt("0x" + $('#fnum').text());
	if ((source >= 0) && (source < 16)) {
		// FIXME: read the size of the instructionSet array for max ?
		if ((dest >= 0) && (dest < instructionSet.length)) {
			change_instruction(source, dest);
			$('#cnum').val('');
			$('#fnum').val('');
		}
	}
	update_status();
	$('#cur_set').html(get_instruction_set(true));
	$('#instset').html(get_instruction_set(true));
}

function save_program() {
	var title = $('#file_title').val();
	var descr = $('#file_description').val();
	if (title.length > 0) {
		save_state();
		$.fancybox.close();
	}
}

function load_program() {
	load_state();
	$.fancybox.close();
}

var keyBindings = new Array();
function trap_keys() {
	keyBindings.push(KeyboardJS.on('down',  key_down, null));
	keyBindings.push(KeyboardJS.on('up',    key_down, null));
	keyBindings.push(KeyboardJS.on('left',  key_down, null));
	keyBindings.push(KeyboardJS.on('right', key_down, null));
	keyBindings.push(KeyboardJS.on('space', key_down, null));
	keyBindings.push(KeyboardJS.on('0,1,2,3,4,5,6,7,8,9,A,a,B,b,C,c,D,d,E,e,F,f', key_down, null));
	keyBindings.push(KeyboardJS.on('num0,num1,num2,num3,num4,num5,num6,num7,num8,num9', key_down, null));
	keyBindings.push(KeyboardJS.on('T,t,X,x,G,g,I,i,L,l,N,n,O,o,P,p,S,s', key_down, null));
}

function pass_keys() {
	while (keyBindings.length > 0) {
		var one = keyBindings.pop();
		one.clear();
	}
}

	$(function() {
		init();
		var newRow;
		var spacerRow='<tr><td class="addresscell"></td><td colspan="21" class="blankcell"></td>';
		for (var hi=0; hi<11; hi++) {
			$('.peekotable > tbody:last').append(spacerRow);
			if (hi < 10) {
				newRow = '<tr><td class="addresscell">' + hi + '</td>';
			} else {
				newRow = '<tr><td class="addresscell"></td>';
			}
			for (var lo=0; lo<16; lo++) {
				if (10 == hi) {
					newRow += '<td class="blankcell"></td><td class="outputcell" id="' + hi + lo + '">0</td>';
				} else {
					newRow += '<td class="blankcell"></td><td class="memorycell" id="' + hi + lo + '">0</td>';
				}
			}
			newRow += '<td class="blankcell"></td></tr>';
			$('.peekotable > tbody:last').append(newRow);
		}
		$('.peekotable > tbody:last').append(spacerRow);
		trap_keys();

		$('.fancybox').fancybox({
			afterLoad : function() {
				pass_keys();
			},
			afterClose : function() {
				trap_keys();
			},
   			closeClick : false,
    			helpers : { 
        			overlay : {closeClick: false}
    			}
		});

		halt_program(programState.READY);
		update_status();
		show_pc();

		$('#instset').html(get_instruction_set(true));
		fillin_popups();
	});
</script>
<div id="instruction_popup" style="display:none">
<table class="swap_set">
 <thead>
  <tr>
   <td>Current Instructions</td>
   <td>Full Instruction List</td>
  </tr>
 </thead>
 <tr>
  <td id="cur_set"></td>
  <td id="full_set"></td>
 </tr>
 <tfoot>
  <tr>
   <td><input id="cnum" type="text" size="3" maxlength="1"></td>
   <td><input id="fnum" type="text" size="3" maxlength="2"></td>
  </tr>
  <tr>
   <td><input type="button" value="Swap" onClick="swap_instructions();"></td>
  </tr>
 </tfoot>
</table>
</div>
<div id="save_popup" style="display:none">
<table class="swap_set">
 <thead>
  <tr>
   <td colspan="2">Save Program</td>
  </tr>
 </thead>
 <tr>
  <td>Program Title:</td>
  <td><input id="file_title" type="text" size="40"></td>
 </tr>
 <tr>
  <td>Program Description:</td>
  <td><textarea id="file_description" cols="40" rows="5"></textarea></td>
 <tr>
  <tr>
   <td><input type="button" value="Save" onClick="save_program();"></td>
  </tr>
</table>
</div>
<div id="load_popup" style="display:none">
</div>
</body></html> 

